<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点事件</title>
	</head>
	<body>
		<div id="content"></div>
		<input type="text" id="input" value="默认值">
		<script>
			let content=document.getElementById("content")
			//输入事件(实时触发)
			document.getElementById("input").addEventListener('input',function(e){
				console.log('这是输入事件：',e.target.value)
				content.innerText=e.target.value;
			})
			//改变事件(值发送改变，且鼠标松开后触发)
			document.getElementById("input").addEventListener('change',function(e){
				console.log('改变了',e.target.value);
			})
			//点击事件(点击就触发)
			document.getElementById("input").addEventListener('click',function(e){
				console.log('点击了',e.target.value);
			})
			
			//鼠标移入了
			document.getElementById("input").addEventListener('mouseenter', function(event) {
			  // 事件处理程序
			  console.log('鼠标移入了',event.target.value);
			});
			
			//鼠标移出事件
			document.getElementById("input").addEventListener('mouseleave', function(event) {
			  // 事件处理程序
			    console.log('鼠标移出去了',event.target.value);
			});
			
			//按钮监听事件
			document.addEventListener("keydown", function(event) {
			  // 事件处理逻辑
			  console.log("Key pressed: " + event.key);
			});
			
			
			
			
			
			
			
			
		</script>
	</body>
</html>